<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name = "viewport" content = "width = device-width,initial-scale = 1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" href="stylesheets/index.css">
	<script src = "js/jquery-2.1.1.min.js"></script>
</head>
<body>
	<div class="container">
		<section class = "home-page" id = "homePage">
			<img class = "home-back" src="images/shouye.png" alt="">
			<a id = "homeBtn" href="#"></a>
		</section>
		<section class = "page1" id = "page1">
			<img class = "backs" src="images/back5.png" alt="">
			<div class="icons" id = "icons">
				<img class = "years" src="images/6.png" alt="">
				<div class="circles" id = "circles">
					<div class="cir1">
						<a href="#" index = "1"></a>
						<div class="cir-cont">
							<img class = "cirImg-1" src="images/word1.png" alt="">
							<img src="images/word.png" alt="">
						</div>
					</div>
					<div class="cir2">
						<a href="#" index = "2"></a>
						<div class="cir-cont">
							<img class = "cirImg-2" src="images/word1.png" alt="">
							<img src="images/word.png" alt="">
						</div>
					</div>
					<div class="cir3">
						<a href="#" index = "3"></a>
						<div class="cir-cont">
							<img class = "cirImg-3" src="images/word1.png" alt="">
							<img src="images/word.png" alt="">
						</div>
					</div>
					<div class="cir4">
						<a href="#" index = "4"></a>
						<div class="cir-cont">
							<img class = "cirImg-4" src="images/word1.png" alt="">
							<img src="images/word.png" alt="">
						</div>
					</div>
					<div class="cir5">
						<a href="#" index = "5"></a>
						<div class="cir-cont">
							<img class = "cirImg-5" src="images/word1.png" alt="">
							<img src="images/word.png" alt="">
						</div>
					</div>
					<div class="cir6">
						<a href="#"  index = "6"></a>
						<div class="cir-cont">
							<img class = "cirImg-6" src="images/word1.png" alt="">
							<img src="images/word.png" alt="">
						</div>
					</div>
					<div class="cir7">
						<a href="#"  index = "7"></a>
						<div class="cir-cont">
							<img class = "cirImg-7" src="images/word1.png" alt="">
							<img src="images/word.png" alt="">
						</div>
					</div>
				</div>
			</div>
			<div class="contents">
				<div class="pcont-1 common" id = "pcont-1">
					<div class="main">
						<div id = "content" class="content">
							<p>数字为啥不行数11111111字为啥不行数字为啥不行数字为啥不行数字为啥不行数字11111为啥不行数字为啥不行数字为啥不行数字为啥不行数字为啥不行数字为啥不行</p>
							<div class="btns" id = "btns">
								<a href="#" id = "btn-1-left"><img src="images/zhong.png" alt=""></a>
								<a href="#" id = "btn-1-right"><img src="images/zhong.png" alt=""></a>
							</div>
						</div>
					</div>
					<div class="p-left" id = "pLeft-1">
						<img class = "v-l-back" src="images/back3.png" alt="">
						<a class = "l-btn"><img src="images/l-button.png" alt=""></a> 
						<div class="l-content">
							<p>寄件人：<span>小津安二郎</span></p>
							<p>收件人：<span>小津安二郎</span></p>
							<img class = "l-img" src="images/pic.png" alt="">
							<p class = "l-cont">“从最近二三天开始，他们转入攻势，乘夜包围定远向城内发射迫击炮弹。但我并不惊慌，枪炮声也早已习以为常，仍能酣然熟睡。子弹不容易击中我，而且也绝不能让它击中。现在眺望定远城外，风景异常清明秀丽。柳吐新绿，河水淼淼，油菜花一片金黄......那就纯然是一幅Crown Leader 2的插图城内发射迫击炮弹。但我并不惊慌，枪炮声也早已习以为常，仍能酣然熟睡。子弹不容易击中我，而且也绝不能让它击中。现在眺望定远定远城外，风景异常清明秀丽。柳吐新绿，河水淼淼，油菜花一片金黄......那就纯然是一幅Crown Leader 2的插图城内发射迫击炮弹。但我并不惊慌，枪炮声也早已习以为常，仍能酣然熟睡。子弹不容易击中我，而且也绝不能让它击中。现在眺望定远</p>
						</div>
					</div>
					<div class="p-right" id = "pRight-1">
						<a class = "r-btn"><img src="images/r-btn.png" alt=""></a>
						<img class = "v-r-back" src="images/back4.png" alt=""> 
						<div class="r-content">
							
							<p>寄件人：<span>小津安二郎</span></p>
							<p>收件人：<span>小津安二郎</span></p>
							<img class = "r-img" src="images/pic.png" alt="">
							<p class = "r-cont">“从最近二三天开始，他们转入攻势，乘夜包围定远向城内发射迫击炮弹。但我并不惊慌，枪炮声也早已习以为常，仍能酣然熟睡。子弹不容易击中我，而且也绝不能让它击中。现在眺望定远城外，风景异常清明秀丽。柳吐新绿，河水淼淼，油菜花一片金黄......那就纯然是一幅Crown Leader 2的插图</p>
						</div>
					</div>
				</div>
				<div class="pcont-2 common" id = "pcont-2">
					<div class="main">
						<div id = "content" class="content">
							<p>1938年战火在长2222222江南北两岸展开，39年日军占据武汉，战争进入战略相持阶段。日本士兵在写给东京长官的信中憧憬武汉陷落后东京举办的庆祝提灯会，而爱国将领张自忠却在日军为保武汉发起的</p>
							<div class="btns" id = "btns">
								<a href="#" id = "btn-2-left"><img src="images/zhong.png" alt=""></a>
								<a href="#" id = "btn-2-right"><img src="images/zhong.png" alt=""></a>
							</div>
						</div>
					</div>
					<div class="p-left" id = "pLeft-2">
						<a class = "l-btn"><img src="images/l-button.png" alt=""></a>
						<img class = "v-l-back" src="images/back3.png" alt=""> 
						<div class="l-content">
							
							<p>寄件人：<span>小津安二郎</span></p>
							<p>收件人：<span>小津安二郎</span></p>
							<img class = "l-img" src="images/pic.png" alt="">
							<p class = "l-cont">“从最近二三天开始，他们转入攻势，乘夜包围定远向城内发射迫击炮弹。但我并不惊慌，枪炮声也早已习以为常，仍能酣然熟睡。子弹不容易击中我，而且也绝不能让它击中。现在眺望定远城外，风景异常清明秀丽。柳吐新绿，河水淼淼，油菜花一片金黄......那就纯然是一幅Crown Leader 2的插图城内发射迫击炮弹。但我并不惊慌，枪炮声也早已习以为常，仍能酣然熟睡。子弹不容易击中我，而且也绝不能让它击中。现在眺望定远定远城外，风景异常清明秀丽。柳吐新绿，河水淼淼，油菜花一片金黄......那就纯然是一幅Crown Leader 2的插图城内发射迫击炮弹。但我并不惊慌，枪炮声也早已习以为常，仍能酣然熟睡。子弹不容易击中我，而且也绝不能让它击中。现在眺望定远</p>
						</div>
					</div>
					<div class="p-right" id = "pRight-2">
						<a class = "r-btn"><img src="images/r-btn.png" alt=""></a>
						<img class = "v-r-back" src="images/back4.png" alt=""> 
						<div class="r-content">
							
							<p>寄件人：<span>小津安二郎</span></p>
							<p>收件人：<span>小津安二郎</span></p>
							<img class = "r-img" src="images/pic.png" alt="">
							<p class = "r-cont">“从最近二三天开始，他们转入攻势，乘夜包围定远向城内发射迫击炮弹。但我并不惊慌，枪炮声也早已习以为常，仍能酣然熟睡。子弹不容易击中我，而且也绝不能让它击中。现在眺望定远城外，风景异常清明秀丽。柳吐新绿，河水淼淼，油菜花一片金黄......那就纯然是一幅Crown Leader 2的插图</p>
						</div>
					</div>
				</div>
				<div class="pcont-3 common" id = "pcont-3">
					<div class="main">
						<div id = "content" class="content">
							<p>数字为啥不行数3333333字为啥不行数字为啥不行数字为啥不行数字为啥不行数字为啥不行数字为啥不行数字为啥不行数字为啥不行数字为啥不行数字为啥不行</p>
							<div class="btns" id = "btns">
								<a href="#" id = "btn-3-left"><img src="images/zhong.png" alt=""></a>
								<a href="#" id = "btn-3-right"><img src="images/zhong.png" alt=""></a>
							</div>
						</div>
					</div>
					<div class="p-left" id = "pLeft-3">
						<a class = "l-btn"><img src="images/l-button.png" alt=""></a>
						<img class = "v-l-back" src="images/back3.png" alt=""> 
						<div class="l-content">
							
							<p>寄件人：<span>小津安二郎</span></p>
							<p>收件人：<span>小津安二郎</span></p>
							<img class = "l-img" src="images/pic.png" alt="">
							<p class = "l-cont">“从最近二三天开始，他们转入攻势，乘夜包围定远向城内发射迫击炮弹。但我并不惊慌，枪炮声也早已习以为常，仍能酣然熟睡。子弹不容易击中我，而且也绝不能让它击中。现在眺望定远城外，风景异常清明秀丽。柳吐新绿，河水淼淼，油菜花一片金黄......那就纯然是一幅Crown Leader 2的插图城内发射迫击炮弹。但我并不惊慌，枪炮声也早已习以为常，仍能酣然熟睡。子弹不容易击中我，而且也绝不能让它击中。现在眺望定远定远城外，风景异常清明秀丽。柳吐新绿，河水淼淼，油菜花一片金黄......那就纯然是一幅Crown Leader 2的插图城内发射迫击炮弹。但我并不惊慌，枪炮声也早已习以为常，仍能酣然熟睡。子弹不容易击中我，而且也绝不能让它击中。现在眺望定远</p>
						</div>
					</div>
					<div class="p-right" id = "pRight-3">
						<a class = "r-btn"><img src="images/r-btn.png" alt=""></a>
						<img class = "v-r-back" src="images/back4.png" alt=""> 
						<div class="r-content">
							
							<p>寄件人：<span>小津安二郎</span></p>
							<p>收件人：<span>小津安二郎</span></p>
							<img class = "r-img" src="images/pic.png" alt="">
							<p class = "r-cont">“从最近二三天开始，他们转入攻势，乘夜包围定远向城内发射迫击炮弹。但我并不惊慌，枪炮声也早已习以为常，仍能酣然熟睡。子弹不容易击中我，而且也绝不能让它击中。现在眺望定远城外，风景异常清明秀丽。柳吐新绿，河水淼淼，油菜花一片金黄......那就纯然是一幅Crown Leader 2的插图</p>
						</div>
					</div>
				</div>
				<div class="pcont-4 common" id = "pcont-4">
					<div class="main">
						<div id = "content" class="content">
							<p>1938年战火在长4444444江南北两岸展开，39年日军占据武汉，战争进入战略相持阶段。日本士兵在写给东京长官的信中憧憬武汉陷落后东京举办的庆祝提灯会，而爱国将领张自忠却在日军为保武汉发起的</p>
							<div class="btns" id = "btns">
								<a href="#" id = "btn-4-left"><img src="images/zhong.png" alt=""></a>
								<a href="#" id = "btn-4-right"><img src="images/zhong.png" alt=""></a>
							</div>
						</div>
					</div>
					<div class="p-left" id = "pLeft-4">
						<a class = "l-btn"><img src="images/l-button.png" alt=""></a>
						<img class = "v-l-back" src="images/back3.png" alt=""> 
						<div class="l-content">
							
							<p>寄件人：<span>小津安二郎</span></p>
							<p>收件人：<span>小津安二郎</span></p>
							<img class = "l-img" src="images/pic.png" alt="">
							<p class = "l-cont">“从最近二三天开始，他们转入攻势，乘夜包围定远向城内发射迫击炮弹。但我并不惊慌，枪炮声也早已习以为常，仍能酣然熟睡。子弹不容易击中我，而且也绝不能让它击中。现在眺望定远城外，风景异常清明秀丽。柳吐新绿，河水淼淼，油菜花一片金黄......那就纯然是一幅Crown Leader 2的插图城内发射迫击炮弹。但我并不惊慌，枪炮声也早已习以为常，仍能酣然熟睡。子弹不容易击中我，而且也绝不能让它击中。现在眺望定远定远城外，风景异常清明秀丽。柳吐新绿，河水淼淼，油菜花一片金黄......那就纯然是一幅Crown Leader 2的插图城内发射迫击炮弹。但我并不惊慌，枪炮声也早已习以为常，仍能酣然熟睡。子弹不容易击中我，而且也绝不能让它击中。现在眺望定远</p>
						</div>
					</div>
					<div class="p-right" id = "pRight-4">
						<a class = "r-btn"><img src="images/r-btn.png" alt=""></a>
						<img class = "v-r-back" src="images/back4.png" alt=""> 
						<div class="r-content">
							
							<p>寄件人：<span>小津安二郎</span></p>
							<p>收件人：<span>小津安二郎</span></p>
							<img class = "r-img" src="images/pic.png" alt="">
							<p class = "r-cont">“从最近二三天开始，他们转入攻势，乘夜包围定远向城内发射迫击炮弹。但我并不惊慌，枪炮声也早已习以为常，仍能酣然熟睡。子弹不容易击中我，而且也绝不能让它击中。现在眺望定远城外，风景异常清明秀丽。柳吐新绿，河水淼淼，油菜花一片金黄......那就纯然是一幅Crown Leader 2的插图</p>
						</div>
					</div>
				</div>
				<div class="pcont-5 common" id = "pcont-5">
					<div class="main">
						<div id = "content" class="content">
							<p>1938年战火在长555555江南北两岸展开，39年日军占据武汉，战争进入战略相持阶段。日本士兵在写给东京长官的信中憧憬武汉陷落后东京举办的庆祝提灯会，而爱国将领张自忠却在日军为保武汉发起的</p>
							<div class="btns" id = "btns">
								<a href="#" id = "btn-5-left"><img src="images/zhong.png" alt=""></a>
								<a href="#" id = "btn-5-right"><img src="images/zhong.png" alt=""></a>
							</div>
						</div>
					</div>
					<div class="p-left" id = "pLeft-5">
						<a class = "l-btn"><img src="images/l-button.png" alt=""></a>
						<img class = "v-l-back" src="images/back3.png" alt=""> 
						<div class="l-content">
							
							<p>寄件人：<span>小津安二郎</span></p>
							<p>收件人：<span>小津安二郎</span></p>
							<img class = "l-img" src="images/pic.png" alt="">
							<p class = "l-cont">“从最近二三天开始，他们转入攻势，乘夜包围定远向城内发射迫击炮弹。但我并不惊慌，枪炮声也早已习以为常，仍能酣然熟睡。子弹不容易击中我，而且也绝不能让它击中。现在眺望定远城外，风景异常清明秀丽。柳吐新绿，河水淼淼，油菜花一片金黄......那就纯然是一幅Crown Leader 2的插图城内发射迫击炮弹。但我并不惊慌，枪炮声也早已习以为常，仍能酣然熟睡。子弹不容易击中我，而且也绝不能让它击中。现在眺望定远定远城外，风景异常清明秀丽。柳吐新绿，河水淼淼，油菜花一片金黄......那就纯然是一幅Crown Leader 2的插图城内发射迫击炮弹。但我并不惊慌，枪炮声也早已习以为常，仍能酣然熟睡。子弹不容易击中我，而且也绝不能让它击中。现在眺望定远</p>
						</div>
					</div>
					<div class="p-right" id = "pRight-5">
						<a class = "r-btn"><img src="images/r-btn.png" alt=""></a>
						<img class = "v-r-back" src="images/back4.png" alt=""> 
						<div class="r-content">
							
							<p>寄件人：<span>小津安二郎</span></p>
							<p>收件人：<span>小津安二郎</span></p>
							<img class = "r-img" src="images/pic.png" alt="">
							<p class = "r-cont">“从最近二三天开始，他们转入攻势，乘夜包围定远向城内发射迫击炮弹。但我并不惊慌，枪炮声也早已习以为常，仍能酣然熟睡。子弹不容易击中我，而且也绝不能让它击中。现在眺望定远城外，风景异常清明秀丽。柳吐新绿，河水淼淼，油菜花一片金黄......那就纯然是一幅Crown Leader 2的插图</p>
						</div>
					</div>
				</div>
			</div>
		</section>

		<section class = "last-page" id = "last-page">
			<img class = "back-img" src="images/2.jpg" alt="">
			<div class="lastCont" id = "lastCont">
				<div class="header">
					<a href="#" id = "last-btn"></a>
					<img src="images/10.png" alt="">
				</div>
				<div class="content">
					<p>这10个人，他们未曾谋面，也不会想过这世上还有另一个人在同一片战火中和自己一样提笔写一封家书。看似平行的人生，因战争相交，因战争改变。70年已过去，不管是中国人还是日本人，正确面对过去，才能走向未来。</p>
				</div>
				<div class="footer">
					<div class="f-top">
						<a class = "erweima"><img src="images/erweima.png" alt=""></a>
						<div class="zhuan">
							<a><img src="images/canyu.png" alt=""></a>
							<a><img src="images/gentie.png" alt=""></a>
						</div>
					</div>
					<div class="f-bottom">
						<img src="images/logo.png" alt=""><br/>
						<p>
							<span>策划/丽娜</span>
							<span>策划/丽娜</span>
							<span>策划/丽娜</span> 
						</p>
					</div>
				</div>
			</div>
		</section>
	</div>

	<script>
		var sizeRatio = $(window).width() / 640;
		var size = sizeRatio > 1 ? 1 : sizeRatio;
		$("body").css("font-size",size * 6.25 + "%");
		$("#icons").height(size * 1299);
		// $("#lastCont").height(size *480);
	</script>
	<script src = "js/index.js"></script>
</body>
</html>